import { Popup, Radio, PullToRefresh, List, Image, Tag, SpinLoading, Button, Toast, ImageViewer } from "antd-mobile";
import EmptyBlock from '@/components/emptyBlock'

import React, { useEffect, useState } from "react"
import { DownOutline, AddCircleOutline } from 'antd-mobile-icons'
import { useSearchParams } from 'react-router-dom';
import './index.css'
import api from '@/api/iap/index'
import cartApi from "@/api/iap/cart"
import dayjs from 'dayjs';
import RichTextDisplay from '@/components/richText/index';
import add_card from '@/assets/logo/add_card.png'

export default function GoodsList() {

    const [searchParams, setSearchParams] = useSearchParams();
    const [popupVisible, setPopupVisible] = useState(false);
    const [loadingAddCart, setLoadingAddCart] = useState(false)

    const [imageData, setImageData] = useState({
        image: '',
        visible: false
    })

    const openMeta = () => { setPopupVisible(true) }

    const [productList, setProductList] = useState([])
    const [actData, setActData] = useState({})
    //获取内购活动列表
    const getProduct = async () => {

        try {
            let res = await api.product_by_id({ activityId: searchParams.get('id') })
            setProductList(res.data || [])
        } finally {
        }
    }
    //获取内购活动详情
    const getActDetial = async () => {
        let res = await api.activity_detail_by_id({ activityId: searchParams.get('id') })
        setActData(res.data)
    }
    //加入购物车
    const addCart = async (item) => {

        let data = {
            productId: item.productId,
            count: item.minimumBuyQuantity,
            activityId: item.activityId
        }

        setLoadingAddCart(true)
        try {
            let res = await cartApi.cart_add(data)
            if (res.msg == '') {
                Toast.show({ content: '加购成功', position: 'top' })
            } else {
                Toast.show({ content: res.msg, position: 'top' })
            }

        } finally {
            setLoadingAddCart(false)
        }
    }

    useEffect(() => {
        getProduct()
        getActDetial()
    }, [])

    return (
        <div className="GoodsList">
            <div className="act-name-warp" style={{ backgroundImage: actData?.activityBgPicAddr ? `url(${actData?.activityBgPicAddr})` : `linear-gradient(to right, rgba(87, 150, 245, 0.4), rgba(255, 255, 255, 0.4))` }}>
                <div className="act-name-left">
                    <div style={{ fontSize: '15px', fontWeight: '700', marginBottom: '5px' }}> {actData?.activityName}</div>
                    <div style={{ fontSize: '12px', color: 'gray', marginLeft: '10px' }}>   {dayjs(actData?.activityBeginTime).format('YYYY-MM-DD')} -  {dayjs(actData?.activityEndTime).format('YYYY-MM-DD')}  </div>
                </div>
                <div style={{ background: '#fff', padding: '2px', borderRadius: '5px', border: '1px solid #409eff' }}>
                    <DownOutline fontSize={18} color='#409eff' onClick={openMeta} />
                </div>
            </div>

            {/* 商品列表 */}
            {
                productList.length == 0 ? <EmptyBlock /> : <List>
                    {
                        productList.map((item, index) => (
                            <List.Item key={index}>
                                <div className="good-card">
                                    <Image src={item.productPicAddr} onClick={() => { setImageData({ image: item.productPicAddr, visible: true }) }} width={80} height={80} fit='fill' style={{ borderRadius: "15px" }} />

                                    <div className="good-desc" style={{
                                        display: 'flex', flexDirection: 'column', justifyContent: 'space-between', textAlign: 'left', marginLeft: '10px', flex: 1, height: '100%', fontSize: '13px'
                                    }}>
                                        <div >{item.productName}</div>
                                        <Tag color='#2db7f5'
                                            fill='outline' style={{ width: 'max-content' }}>限购：{`${item.minimumBuyQuantity} ~ ${item.limitBuyQuantity}`}</Tag>
                                        <div style={{ color: '#0097e6', fontWeight: '700' }}>￥{item.innerPrice}</div>
                                    </div>
                                    <Button size="mini" style={{ width: '95px', border: 'none', width: 'max-content' }} color="primary" fill='outline' loading={loadingAddCart} onClick={() => { addCart(item) }} > <img style={{ width: '30px', height: '30px' }} src={add_card} /></Button>
                                </div>
                            </List.Item>
                        ))
                    }
                </List>
            }

            

            <Popup visible={popupVisible} onMaskClick={() => { setPopupVisible(false) }} onClose={() => { setPopupVisible(false) }} position='top' bodyStyle={{ overflow: 'auto', height: 'max-content', maxHeight: '60vh' }}>
                <RichTextDisplay html={actData?.activityRuleRemark} />
            </Popup>

            <ImageViewer image={imageData.image} visible={imageData.visible} onClose={() => { setImageData({ image: '', visible: false }) }} />

        </div>
    );
}
